<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.progress{
				width: 100px;
				margin: 100px auto;
				position: relative;
			}
			.bar{
				width: 100%;
				height: 2px;
				background: #666;
			}
			.circle{
				position: absolute;
				top: 0;
				left: 0;
				width: 30px;
				height: 2px;
				background: #337AB7;
			}
			.circle:after{
				content: "";
				width: 10px;
				height: 10px;
				border: 1px solid #337AB7;
				border-radius: 50%;
				background: #fff;
				position: absolute;
				top: -5px;
				right: 0;
			}
			.btn{
				width: 100px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				background: url(img/2222222-1.png)no-repeat;
				background-color: #333333;
				background-size: 50%;
				border-radius: 10px;
				color: #fff;
				margin: 50px auto;
				cursor: pointer;
			}
			.btn:hover{
				background: url(img/33333-2.png)no-repeat;
				background-color: #aaa;
				background-size: 50%;
				color: #000;
			}
			#file{
				display: none;
			}
		</style>
	</head>
	<body>
		<select name="city">
			<option value="广东">广东</option>
			<option value="广西">广西</option>
			<option value="上海">上海</option>
		</select>
		<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
		<label for="file">
			<div class="btn">
				按钮
				<input type="file" id="file" />
			</div>
		</label>
		<!--<input type="text" name="fname" placeholder="请输入用户名" value="">
		<input type="file" accept="image/*" capture="camcorder" />-->
		<div class="progress">
			<div class="bar"></div>
			<div class="circle"></div>
		</div>
		<script type="text/javascript">
			//获取元素属性值
			let bar = document.querySelector(".bar"),
				circle = document.querySelector(".circle");
			bar.addEventListener("mousedown",function(e){
				var	barW = getStyle(circle,"width");
				console.log(e);
				console.log(barW)
				circle.addEventListener("mousemove",function(){
					console.log(bar.offsetLeft);
				})
			})
						
			function getStyle(element,attr) {
			    //判断浏览器是否支持这个方法
			    //element.currentStyle[attr]用于兼容IE
			   return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
			}
			//获取元素相对浏览器屏幕左上角位置
			function getPosition(el){
				return el.getBoundingClientRect()
			}
			
			
			
			
		</script>
	</body>
</html>
